<template>
  <div class="content">
    <ul class="table-list" v-if="!checkbox">
      <li
        @click="setActive(item)"
        v-for="(item, index) in items"
        :class="{
              'active': item == activeItem
            }"
        :key="index"
      >{{item}}</li>
    </ul>

    <div class="table-list" v-else>
      <el-checkbox-group v-model="fieldList">
        <el-checkbox v-for="(item, index) in items" :key="index" :label="item"></el-checkbox>
      </el-checkbox-group>
    </div>
    <div v-if="table == ''">
      <h2>暂无选中任何表格</h2>
    </div>
    <div v-else class="table" v-html="table"></div>
  </div>
</template>

<script>
export default {
  props: ["items", "table", "activeItem", "type", "sheetName", "checkbox"],
  data() {
    return {
      fieldList:[],
    };
  },
  watch:{
    fieldList(val){
      this.$emit('set-val',val, this.type)
    }
  },
  methods: {
    setActive(item) {
      this.$emit("set-active", item, this.type);
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-around;
}

.table-list {
  list-style-type: none;
  user-select: none;
  padding: 0;
  margin: 0;
  width: 18%;

  border-right: 1px solid rgb(195, 190, 190);
}

.table-list > li {
  padding: 8px;
}

.active,
.table-list > li:hover {
  background-color: rgb(131, 129, 129);
  color: white;
}

.table-list,
.table {
  height: 200px;
  max-height: 200px;
  overflow-y: auto;
}

.table {
  width: 80%;
  overflow-x: auto;
}
</style>